package com.dji.compose_learning.ui.view

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.rememberScrollableState
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ScrollableView() {
    Surface(modifier = Modifier.fillMaxSize()) {
        Column(horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center) {
            ScrollableArea()
        }
    }
}

@Composable
fun ScrollableArea() {
    var state by remember {
        mutableStateOf(0f)
    }
    //scrollable可以用于获取滚动位置，其本身不用于实现滚动
    val scrollableState = rememberScrollableState(consumeScrollDelta = {
        state += it
        it
    })
    Box(modifier = Modifier
        .background(MaterialTheme.colorScheme.primary)
        .size(200.dp)
        .scrollable(state = scrollableState, orientation = Orientation.Vertical),
        contentAlignment = Alignment.Center) {
        Text(text = "$state", color = MaterialTheme.colorScheme.onPrimary)
    }
}























